<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" th:replace="~{layout :: html}">
<head>
    <title>智能学习台 - AI智能学习助手</title>
</head>
<body>
    <div th:fragment="content">
        <!-- 欢迎横幅 -->
        <div class="hero-section bg-gradient-primary text-white py-5 mb-4">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-8">
                        <h1 class="display-4 mb-3">
                            <span th:if="${session.user}">欢迎回来，<span th:text="${session.user.realName}"></span>！</span>
                            <span th:unless="${session.user}">欢迎使用 AI智能学习助手</span>
                        </h1>
                        <p class="lead mb-4">基于人工智能的个性化学习体验，让学习更高效、更智能</p>
                        <div th:unless="${session.user}">
                            <a href="/register" class="btn btn-light btn-lg me-3">立即注册</a>
                            <a href="/login" class="btn btn-outline-light btn-lg">登录账户</a>
                        </div>
                    </div>
                    <div class="col-lg-4 text-center">
                        <i class="fas fa-brain fa-8x opacity-75"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 用户已登录的仪表盘 -->
        <div th:if="${session.user}">
            <!-- 今日概览卡片 -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card bg-primary text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 id="todayLearningTime">0</h4>
                                    <p class="mb-0">今日学习时长(分钟)</p>
                                </div>
                                <i class="fas fa-clock fa-2x opacity-75"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-success text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 id="completedCourses">0</h4>
                                    <p class="mb-0">已完成课程</p>
                                </div>
                                <i class="fas fa-check-circle fa-2x opacity-75"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-warning text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 id="avgMastery">0%</h4>
                                    <p class="mb-0">平均掌握度</p>
                                </div>
                                <i class="fas fa-chart-line fa-2x opacity-75"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-info text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 id="activeStreaks">0</h4>
                                    <p class="mb-0">连续学习天数</p>
                                </div>
                                <i class="fas fa-fire fa-2x opacity-75"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 主要功能区域 -->
            <div class="row">
                <!-- 智能推荐 -->
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0"><i class="fas fa-magic me-2"></i>智能推荐</h5>
                            <a href="/courses/recommended" class="btn btn-sm btn-outline-primary">查看更多</a>
                        </div>
                        <div class="card-body">
                            <div id="recommendedCourses" class="row">
                                <!-- 推荐课程将通过AJAX加载 -->
                                <div class="col-12 text-center py-4">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden">加载中...</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 快速操作 -->
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-rocket me-2"></i>快速操作</h5>
                        </div>
                        <div class="card-body">
                            <div class="d-grid gap-2">
                                <button class="btn btn-primary" onclick="openQuickQA()">
                                    <i class="fas fa-comments me-2"></i>智能问答
                                </button>
                                <button class="btn btn-success" onclick="createLearningPath()">
                                    <i class="fas fa-route me-2"></i>规划学习路径
                                </button>
                                <button class="btn btn-info" onclick="viewAnalytics()">
                                    <i class="fas fa-chart-bar me-2"></i>学习分析
                                </button>
                                <button class="btn btn-warning" onclick="takeQuiz()">
                                    <i class="fas fa-question-circle me-2"></i>快速测验
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 学习进度 -->
                    <div class="card mt-3">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-tasks me-2"></i>学习进度</h5>
                        </div>
                        <div class="card-body">
                            <div id="learningProgress">
                                <!-- 学习进度图表 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 最近活动 -->
            <div class="row mt-4">
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-history me-2"></i>最近学习</h5>
                        </div>
                        <div class="card-body">
                            <div id="recentLearning" class="list-group list-group-flush">
                                <!-- 最近学习记录 -->
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-lightbulb me-2"></i>学习洞察</h5>
                        </div>
                        <div class="card-body">
                            <div id="learningInsights">
                                <!-- 学习洞察 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 未登录用户的功能展示 -->
        <div th:unless="${session.user}">
            <div class="container">
                <!-- 核心功能介绍 -->
                <div class="row text-center mb-5">
                    <div class="col-lg-4 mb-4">
                        <div class="card h-100 border-0 shadow-sm">
                            <div class="card-body p-4">
                                <i class="fas fa-brain fa-3x text-primary mb-3"></i>
                                <h4>智能推荐</h4>
                                <p>基于AI算法的个性化内容推荐，让学习更精准高效</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 mb-4">
                        <div class="card h-100 border-0 shadow-sm">
                            <div class="card-body p-4">
                                <i class="fas fa-comments fa-3x text-success mb-3"></i>
                                <h4>智能问答</h4>
                                <p>24小时AI助教，随时解答学习疑问，提供精准帮助</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 mb-4">
                        <div class="card h-100 border-0 shadow-sm">
                            <div class="card-body p-4">
                                <i class="fas fa-route fa-3x text-warning mb-3"></i>
                                <h4>学习路径</h4>
                                <p>智能规划最优学习路径，循序渐进达成学习目标</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 热门课程展示 -->
                <div class="row">
                    <div class="col-12">
                        <h2 class="text-center mb-4">热门课程</h2>
                        <div id="hotCourses" class="row">
                            <!-- 热门课程将通过AJAX加载 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // 如果用户已登录，加载仪表盘数据
            if ($('#todayLearningTime').length) {
                loadDashboardData();
            } else {
                // 未登录用户，加载热门课程
                loadHotCourses();
            }
        });

        function loadDashboardData() {
            // 加载今日统计
            $.get('/api/analysis/statistics', function(response) {
                if (response.success) {
                    const stats = response.data;
                    $('#todayLearningTime').text(stats.totalLearningTimeMinutes || 0);
                    $('#completedCourses').text(stats.coursesLearned || 0);
                    $('#avgMastery').text(Math.round((stats.avgMasteryLevel || 0) * 100) + '%');
                }
            });

            // 加载推荐课程
            $.get('/api/recommendation/courses?limit=4', function(response) {
                if (response.success && response.data.length > 0) {
                    let html = '';
                    response.data.forEach(course => {
                        html += `
                            <div class="col-md-6 mb-3">
                                <div class="card h-100">
                                    <div class="card-body">
                                        <h6 class="card-title">${course.courseName}</h6>
                                        <p class="card-text text-muted small">${course.description || '暂无描述'}</p>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="badge bg-secondary">难度 ${course.difficultyLevel || 1}</span>
                                            <a href="/courses/${course.id}" class="btn btn-sm btn-primary">开始学习</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `;
                    });
                    $('#recommendedCourses').html(html);
                } else {
                    $('#recommendedCourses').html('<div class="col-12 text-center text-muted">暂无推荐课程</div>');
                }
            });

            // 加载学习洞察
            $.get('/api/analysis/insights', function(response) {
                if (response.success && response.data.length > 0) {
                    let html = '';
                    response.data.forEach(insight => {
                        const iconClass = insight.type === 'positive' ? 'fa-thumbs-up text-success' :
                                         insight.type === 'warning' ? 'fa-exclamation-triangle text-warning' :
                                         'fa-info-circle text-info';
                        html += `
                            <div class="alert alert-light d-flex align-items-center mb-2">
                                <i class="fas ${iconClass} me-2"></i>
                                <div>
                                    <strong>${insight.title}</strong><br>
                                    <small class="text-muted">${insight.description}</small>
                                </div>
                            </div>
                        `;
                    });
                    $('#learningInsights').html(html);
                } else {
                    $('#learningInsights').html('<p class="text-muted">暂无学习洞察</p>');
                }
            });
        }

        function loadHotCourses() {
            $.get('/api/course/hot?limit=6', function(response) {
                if (response.success && response.data.length > 0) {
                    let html = '';
                    response.data.forEach(course => {
                        html += `
                            <div class="col-lg-4 col-md-6 mb-4">
                                <div class="card h-100">
                                    <div class="card-body">
                                        <h5 class="card-title">${course.courseName}</h5>
                                        <p class="card-text">${course.description || '暂无描述'}</p>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="badge bg-primary">难度 ${course.difficultyLevel || 1}</span>
                                            <a href="/login" class="btn btn-outline-primary">立即学习</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `;
                    });
                    $('#hotCourses').html(html);
                }
            });
        }

        // 快速操作函数
        function openQuickQA() {
            window.location.href = '/qa';
        }

        function createLearningPath() {
            window.location.href = '/learning-path';
        }

        function viewAnalytics() {
            window.location.href = '/analytics';
        }

        function takeQuiz() {
            showMessage('功能开发中', 'info');
        }
    </script>
</body>
</html>